<template>
  <div  class="down-map-warp">
    <demo-warp>
      <dv-page target="parent" fit> 
        <dv-box x-align="center" y-align="middle" width="100%" height="100%"  >
          <dv-chart-map fit :register="register" :map="map"  debug @click="handleClick"></dv-chart-map>
        </dv-box>

        <dv-box x-align="left" y-align="top"   >
        <div class="breadcrumb">
        <div class="item" 
          v-for="(item, index) in breadcrumb" :key="item.id"
          @click="navClick(item, index)"
        >{{item.name}}</div>
        </div>
          
        </dv-box>
      </dv-page>
    </demo-warp> 
  </div> 
    
</template>
<script setup lang="ts" >
import { ref, computed } from 'vue';
import china from '@/assets/geo/china.json';
import geoArray from '@/assets/geo/index.json'
import { DvPage, DvBox, DvChartMap  } from '$comp/index';

const map = ref('china.json')
const breadcrumb = ref([
  {
    id: 'china',
    name: 'China',
    geo: 'china.json'
  }
])

const register = (instance) => {
  const _map = instance.proxy.map 
  
  return new Promise((resolve) => {
    const [path, file] = _map.split('/')
    if (!file) {
      import('../assets/geo/china.json').then((res) => {
        resolve(res.default)
      })
    } else {
      if (path === 'province') {
        const modules = import.meta.glob('../assets/geo/province/*') 
        modules[`../assets/geo/province/${file}`]().then((res) => {   
          resolve(res.default)
        }) 
      } else {
        const modules = import.meta.glob('../assets/geo/city/*') 
        modules[`../assets/geo/city/${file}`]().then((res) => {  
          resolve(res.default)
        }) 
      } 
    }
  }) 
}

const handleClick = (params) => {
  if (params.componentType !== 'geo') return
  const name = params.name.replace('市', '')
  const geoItem = geoArray.find((item) => {
    return item.name === name
  })  
  if (geoItem) {
    map.value = geoItem.geo 
    breadcrumb.value.push(geoItem)
  }
}

const navClick = (item, index) => {
  breadcrumb.value.splice(index + 1) 
  map.value = breadcrumb.value[index].geo
}
</script>
<style lang="scss" scoped>
.down-map-warp{
  width: 1000px;

  .breadcrumb{
    padding: 5px;
    .item{
      display: inline-block;
      margin-right: 5px;
      cursor: pointer; 
      &:hover{
        border-bottom: 1px solid;
      }
      &:after{
        content: '》'
      }
    }
  }
}
</style>